<script lang="ts" setup>
import { ArrowRight } from '@element-plus/icons-vue';
import { ref, onMounted } from 'vue';
import request from '@/utils/http';

interface ReqParams{
  status: number
  channel_id: string | undefined
  begin_pubdate?: string
  end_pubdate?: string
}

interface Channel {
  value: string
  label: string
}

interface ChannelItem {
  id: number
  name: string
}

interface Article {
  id: string
  title: string
  status: number
  pubdate: string
  cover: {
    type: number
    images: string[]
  }
}

const reqParams = ref<ReqParams>({
  status: -1,
  channel_id: undefined,
  begin_pubdate: undefined,
  end_pubdate: undefined
});

const dateRange = ref<[Date, Date] | []>([]);

// 将channelList改为空数组，等待接口数据填充
const channelList = ref<Channel[]>([]);

// 获取频道列表数据
const getChannelList = async () => {
  try {
    const res = await request.get('/v1_0/channels')
    channelList.value = res.data.data.channels.map((item: ChannelItem) => ({
      value: item.id.toString(),
      label: item.name
    }))
  } catch (err) {
    console.error('获取频道列表失败：', err)
  }
}

// 组件挂载时获取频道列表
onMounted(() => {
  getChannelList()
  loadArticleList()
})

// 处理日期改变
const onDateChange = (dates: [Date, Date] | null) => {
  if (dates) {
    reqParams.value.begin_pubdate = dates[0].toISOString()
    reqParams.value.end_pubdate = dates[1].toISOString()
  } else {
    reqParams.value.begin_pubdate = undefined
    reqParams.value.end_pubdate = undefined
  }
}

// 添加表格数据和分页参数
const articleList = ref<Article[]>([])
const total = ref(0)
const page = ref(1)
const pageSize = ref(10)

const loadArticleList = async () => {
  try {
    const res = await request.get('/v1_0/mp/articles', {
      params: {
        page: page.value,
        per_page: pageSize.value,
        ...reqParams.value
      }
    })
    articleList.value = res.data.data.results
    total.value = res.data.data.total_count
  } catch (err) {
    console.error('获取文章列表失败：', err)
  }
}
</script>

<template>
  <div class='article-page'>
  <!-- 筛选区域 -->
  <el-card>
    <div class="header">
      <!-- 面包屑组件 -->
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>内容管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- 表单组件 -->
    <el-form label-width="80px">
      <el-form-item label="状态：">
        <el-radio-group v-model="reqParams.status">
          <el-radio :label="-1">全部</el-radio>
          <el-radio :label="0">草稿</el-radio>
          <el-radio :label="1">待审核</el-radio>
          <el-radio :label="2">审核通过</el-radio>
          <el-radio :label="3">审核失败</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="频道：">
        <el-select v-model="reqParams.channel_id" clearable placeholder="请选择">
          <el-option
            v-for="item in channelList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="日期：">
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="onDateChange"
        />
      </el-form-item>
      <el-form-item label="">
        <el-button type="primary">筛选</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <!-- 筛选结果区域 -->
   <!-- {{ reqParams }}
   {{ channelList }} -->

  <!-- 在筛选区域卡片下方添加 -->
  <el-card class="article-table">
    <el-table :data="articleList" style="width: 100%">
      <el-table-column label="封面">
        <template #default="{ row }">
          <el-image
            v-if="row.cover.type > 0"
            :src="row.cover.images[0]"
            style="width: 60px; height: 60px"
          />
          <span v-else>无图</span>
        </template>
      </el-table-column>
      <el-table-column prop="title" label="标题"></el-table-column>
      <el-table-column prop="status" label="状态" width="100">
        <template #default="{ row }">
          <el-tag v-if="row.status === 0" type="info">草稿</el-tag>
          <el-tag v-else-if="row.status === 1" type="warning">待审核</el-tag>
          <el-tag v-else-if="row.status === 2" type="success">审核通过</el-tag>
          <el-tag v-else-if="row.status === 3" type="danger">审核失败</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="pubdate" label="发布时间"></el-table-column>
      <el-table-column label="操作" width="120">
        <template #default>
          <el-button link type="primary">修改</el-button>
          <el-button link type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <div class="pagination">
      <el-pagination
        v-model:current-page="page"
        v-model:page-size="pageSize"
        :total="total"
        :page-sizes="[2,5,10]"
        layout="total, sizes, prev, pager, next"
        @size-change="loadArticleList"
        @current-change="loadArticleList"
      />
    </div>
  </el-card>
</div>
</template>

<style lang="less" scoped>
.article-table {
  margin-top: 20px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>
